
var cwTotal = 42; //本显示
var getName = "男厕";
var getMax = 100; //最大值

let cwdtOpt = {
	
	legend: {
		orient: 'vertical',
        top: 'center',
        icon:'diamond',
        right: -5,
		data:['占用','空闲'],
		itemHeight: 12,
		itemWidth: 12
	},
	angleAxis: {
		show: false,
		max: getMax,
		type: 'value',
		startAngle: 360, //极坐标初始角度
		endAngle: 0,
		splitLine: {
			show: false
		}
	},
	barMaxWidth: 8, //圆环宽度
	radiusAxis: {
		show: false,
		type: 'category',
	},
	//圆环位置和大小
	polar: {
		center: ['40%', '50%'],
		radius: '110'
	},
	series: [{
			type: 'bar',
			name:'占用',
			color: '#2df3ff',
			data: [{ //上层圆环，显示数据
				value: cwTotal,
				itemStyle: {
					color: '#2df3ff',
				},
			}],
			barGap: '-100%', //柱间距离,上下两层圆环重合
			coordinateSystem: 'polar',
			roundCap: true, //顶端圆角
			z: 3 //圆环层级，同zindex
		},
		{ //下层圆环，显示最大值
			type: 'bar',
			name:'空闲',
			color: '#ff7552',
			data: [{
				value: getMax,
				itemStyle: {
					color: '#ff7552',
					borderWidth: 0,
				},
			}],
			barGap: '-100%',
			coordinateSystem: 'polar',
			roundCap: true,
			z: 1
		},
		//仪表盘
		{
			type: 'gauge',
			startAngle: 180, //起始角度，同极坐标
			endAngle: 0, //终止角度，同极坐标
			axisLine: {
				show: false,
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitLabel: {
				show: false
			},
			pointer: { // 分隔线
				show: false,
				width: 0
			},
			detail: {
				show: true,
				formatter: function(params) {
					return '{a|' + cwTotal + '}\n{b|' + getName + '}';
				},
				textStyle: {
					rich: {
						a: {
							fontSize: 32,
							color: '#000',
							fontWeight: 'bold',
							lineHeight: 20,
						},
						b: {
							fontSize: 14,
							color: '#000',
							lineHeight: 40,
						}
					}
				},
				offsetCenter: ['-22', 14],
			},
			data: [{
				value: 0
			}]
		}
	]
};
var cwdtChart = echarts.init(document.getElementById('cwdt_1'));
cwdtChart.setOption(cwdtOpt)



let nvcwTotal = 84;

let cwdt2Opt = {
	
	legend: {
		orient: 'vertical',
        top: 'center',
        icon:'diamond',
        right: 10,
		data:['占用','空闲'],
		itemHeight: 12,
		itemWidth: 12
	},
	angleAxis: {
		show: false,
		max: getMax,
		type: 'value',
		startAngle: 360, //极坐标初始角度
		endAngle: 0,
		splitLine: {
			show: false
		}
	},
	barMaxWidth: 8, //圆环宽度
	radiusAxis: {
		show: false,
		type: 'category',
	},
	//圆环位置和大小
	polar: {
		center: ['35%', '50%'],
		radius: '110'
	},
	series: [{
			type: 'bar',
			name:'占用',
			color: '#2df3ff',
			data: [{ //上层圆环，显示数据
				value: nvcwTotal,
				itemStyle: {
					color: '#2df3ff',
				},
			}],
			barGap: '-100%', //柱间距离,上下两层圆环重合
			coordinateSystem: 'polar',
			roundCap: true, //顶端圆角
			z: 3 //圆环层级，同zindex
		},
		{ //下层圆环，显示最大值
			type: 'bar',
			name:'空闲',
			color: '#ff7552',
			data: [{
				value: getMax,
				itemStyle: {
					color: '#ff7552',
					borderWidth: 0,
				},
			}],
			barGap: '-100%',
			coordinateSystem: 'polar',
			roundCap: true,
			z: 1
		},
		//仪表盘
		{
			type: 'gauge',
			startAngle: 180, //起始角度，同极坐标
			endAngle: 0, //终止角度，同极坐标
			axisLine: {
				show: false,
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitLabel: {
				show: false
			},
			pointer: { // 分隔线
				show: false,
				width: 0
			},
			detail: {
				show: true,
				formatter: function(params) {
					return '{a|' + cwTotal + '}\n{b|女厕}';
				},
				textStyle: {
					rich: {
						a: {
							fontSize: 32,
							color: '#000',
							fontWeight: 'bold',
							lineHeight: 20,
						},
						b: {
							fontSize: 14,
							color: '#000',
							lineHeight: 40,
						}
					}
				},
				offsetCenter: ['-32', 14],
			},
			data: [{
				value: 0
			}]
		}
	]
};
cwdt2Chart = echarts.init(document.getElementById('cwdt_2'));
cwdt2Chart.setOption(cwdt2Opt)
